<template>
    <div>
        <h3>事件处理</h3>
        <button v-on:click="count++">Add</button>
        <button @click="count--">Minus</button>
        <p>{{ count }}</p>
        <button @click="addCount">Add</button>
        <button @click="minusCount('test')">Minus</button>
        <p>{{ count2 }}</p>
        <p v-for="(value, key, index) of user" :key="key" @click="getUserName(value, $event)">{{ index }} - {{ key }} - {{ value }}</p>
    </div>
    <div>
        <p>事件修饰符</p>
        <!--https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers-->
        <a @click.prevent="clickHandler" href="http://www.baidu.com">百度</a>
        <div @click="clickDiv">
            <p @click.stop="clickP">ppppp</p>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            count: 0,
            count2: 0,
            user: {
                name: "evan",
                age: 20,
                sex: "male"
            }
        }
    },
    // 注意加s
    methods:{
        addCount(e){
            console.log(this.count2)
            this.count2++;
            console.log(e.target)
            e.target.innerHTML = "Add" + this.count2;
        },
        minusCount(msg){
            console.log(this.count2)
            this.count2--;
            console.log(msg)
        },
        getUserName(name, e){
            console.log(name)
            console.log(e.target)
        },
        clickHandler(e){
            //阻止默认跳转时间
            // e.preventDefault();
            // 使用事件修饰符替换
            console.log("clicked");
        },
        clickDiv(){
            console.log("div");
        },
        clickP(e){
            // 阻止事件冒泡
            // e.stopPropagation();
            console.log("ppppp");
        }
    }
}
</script>
